<template>
  <div class="search">
    <van-search v-model="value" placeholder="搜索歌曲或艺术家" />
    <van-button @click="search(value)" type="primary" size="small">搜索</van-button>
  </div>
</template>

<script>
import { searchAPI } from '../api/getMusic'
export default {
  name: 'MySearch',
  data() {
    return {
      value: "",
      // 歌曲列表
      musicList: "",
    }
  },
  methods: {
    search(value) {
      searchAPI(value).then((res) => {
        // console.log(res);
        console.log(res.data.data[0].list);
        this.musicList = res.data.data[0].list
        this.$bus.$emit("getMusicList", this.musicList)
      })
    }
  },
  mounted() {
    searchAPI('热搜').then((res) => {
      // console.log(res);
      console.log(res.data.data[0].list);
      this.musicList = res.data.data[0].list
      this.$bus.$emit("getMusicList", this.musicList)
    })
  }
}
</script>

<style>
.search {
  display: flex;
  align-items: center;
  margin: 8px;
}

.van-search {
  flex: 1;
  padding: 0 !important;
}
</style>